<template>
  <div id="data-engine-spot-chart" style="width: 100%"></div>
</template>
<script>
import Highcharts, { color } from "highcharts/highstock";
export default {
  data() {
    return {};
  },
  created() {
    setTimeout(() => {
      // 初始化表格
      var chart = Highcharts.chart("data-engine-spot-chart", {
        chart: {
          type: "column",
          backgroundColor: "#0000",
          height:'700'
        },
        labels: {
          style: {
            color: "#000",
          },
        },
        title: {
          text: "点检异常分类统计",
          style: {
            color: "#000",
            fontSize: "24px",
            fontWeight: "550",
          },
        },
        xAxis: {
          labels: {
            // interval: 0,
            rotation:90,
            style: {
              color: "#000",
              fontSize: "16px",
            },
          },
          grid:{
          },
          categories: [
            "大车运行减速机底座地脚螺丝",
            "大车运行联轴器及轴联接螺栓",
            "大车运行车轮轮缘及轴承",
            "大车运行减速机啮合及润滑",
            "副起升制动器制动轮及闸架、闸皮",
            "副小车缓冲器无变形、连接牢固",
            "大车缓冲器无变形、连接牢固",
            "主起升制动器制动轮及闸架、闸皮",
            "主起升钢丝绳排列、润滑及变形",
            "主起升安全制动器制动间距，摩擦片磨损",
            "主起升安全制动器液压站",
            "主起升减速机啮合及润滑",
            "主起升定滑轮组钢丝绳卡及平衡臂",
            "主起升安全制动器底座螺栓",
            "主起升钢丝绳磨损与断丝",
            "主起升吊具板钩衬板及轴销、端部卡板",
            "主小车运行减速机箱体及传动轴",
            "主小车运行联轴器及轴联接螺栓",
            "主小车运行减速机啮合及润滑",
          ],
          // crosshair: true,
        },
        yAxis: {
          min: 0,
          title: {
            text: "",
            style: {
              color: "#000",
            },
          },
        },
        tooltip: {
          // head + 每个 point + footer 拼接成完整的 table
          headerFormat:
            '<span style="font-size:16px">{point.key}</span><table>',
          pointFormat:
            '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y} </b></td></tr>',
          footerFormat: "</table>",
          shared: true,
          useHTML: true,
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
          bar: {
            // color:'#fff'
          },
        },
        legend: {
          enabled: false,
        },
        series: [
          {
            name: "点检异常分类",
            data: [1, 2, 4, 5, 2, 1, 5, 1, 1, 1, 1, 2, 2, 3, 4, 6, 1, 1, 8],
          },
        ],
      });
    }, 0);
  },
};
</script>
